<template>
  <el-container class="main_con">
    <div class="filter_con ds_block" style="margin-bottom:20px">
      <div class="filter_head">
        <h2>中奖列表</h2>
        <div class="filter_area">
          <label class="mr_15 mt_15">奖品类型</label>
          <el-select v-model="obj.type" placeholder="请选择" class="mr_15">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <label class="mr_15 mt_15">领取情况</label>
          <el-select v-model="obj.receive" placeholder="请选择" class="mr_15">
            <el-option v-for="item in receivelist" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-button size="medium" class="ml_15 mr_15" @click="search">搜索</el-button>
        </div>
      </div>
    </div>
    <div class="filter_con ds_block">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="user_name" label="用户">
          <template slot-scope="scope">
            <div class="user" v-if="scope.row.User">
              <div class="face"><vimage :src="scope.row.User.picurl" style="width:50px;height:50px;display:block;border-radius:50%;" ></vimage></div>
              <div class="info">
                <div class="name" :title="scope.row.User.nickname">{{ scope.row.User.nickname }}</div>
                <div class="source"><i class="weixin el-sc-weixin4"></i></div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="info" label="奖品名称"></el-table-column>
        <el-table-column label="抽奖消耗积分">
          <template slot-scope="scope">
            {{ scope.row.Prize ? scope.row.Prize.integral : 0 }}
          </template>
        </el-table-column>
        <el-table-column label="奖品类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1">谢谢惠顾</span>
            <span v-if="scope.row.type == 2">积分</span>
            <span v-if="scope.row.type == 3">红包</span>
            <span v-if="scope.row.type == 4">商品</span>
            <span v-if="scope.row.type == 5">优惠卷</span>
          </template>
        </el-table-column>
        <el-table-column label="领取状态">
          <template slot-scope="scope">
            <span class="win" v-if="scope.row.receive == 1">已领取</span>
            <span class="load" v-if="scope.row.receive == 2">未领取</span>
          </template>
        </el-table-column>
        <el-table-column label="配送方式">
          <template slot-scope="scope">
            <span v-if="scope.row.Logistics&&scope.row.Logistics.type == 1" >快递</span>
            <span v-if="scope.row.Logistics&&scope.row.Logistics.type == 2" >自提</span>
          </template>
        </el-table-column>
        <el-table-column label="物流状态">
          <template slot-scope="scope">
            <span>{{ scope.row.Logistics | getstatus }}</span>
          </template>
        </el-table-column>
        <el-table-column  width="180" label="抽奖日期" prop="create_time"></el-table-column>
        <el-table-column  width="180" label="领奖日期" prop="update_time"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="scope.row.receive==1&&scope.row.type == 4 && scope.row.Logistics && scope.row.Logistics.status == 1 && scope.row.Logistics.type == 1"
              @click="details(scope.row.id,1)"
            >
              发货
            </el-button>
            <el-button
              v-if="scope.row.receive==1&&scope.row.type == 4 && scope.row.Logistics && scope.row.Logistics.status > 1 && scope.row.Logistics.type == 1"

              @click="details(scope.row.id,2)" type="text">发货信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer">
        <el-pagination @current-change="ChangeCurrent" :current-page="page" class="pages" background layout="prev, pager, next" :total="total" hide-on-single-page></el-pagination>
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="900px">
      <div v-if="dialogVisible">
        <div class="order_content">
          <div class="conetnt_a">
            <div class="content_c bor">
              <div class="order_title"><span class="order_title_text">奖品信息</span></div>
              <div class="line">
                <div class="lb">
                  <div class="label">奖品编号:</div>
                  <div class="txt">{{ lottery.Prize.uniqid }}</div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label">奖品名称:</div>
                  <div class="txt">{{ lottery.info }}</div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label"></div>
                  <div class="txt">
                    <vimage style='width:100px;height:100px' :src="lottery.Prize.commodity.master"></vimage>
                  </div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label">奖品数量:</div>
                  <div class="txt">{{ lottery.number }}</div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label">中奖用户:</div>
                  <div class="txt">
                    <el-button size="medium" type="text" @click="showUser">{{ lottery.User.nickname }}</el-button>
                  </div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label">配送方式:</div>
                  <div class="txt" v-if="lottery.Logistics.type == 1">快递</div>
                  <div class="txt" v-else-if="lottery.Logistics.type == 2">自提</div>
                </div>
              </div>
            </div>
            <div class="content_c">
              <div class="order_title"><span class="order_title_text">发货信息</span></div>
              <div class="line">
                <div class="lb">
                  <div class="label">来源:</div>
                  <div class="txt"><i class="weixin el-sc-weixin4"></i></div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label">收货人:</div>
                  <div class="txt">{{ lottery.Logistics.name }}</div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label">联系号码:</div>
                  <div class="txt">{{ lottery.Logistics.mobile }}</div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label">收货地址:</div>
                  <div class="txt">{{ lottery.Logistics.address }}</div>
                </div>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item prop="express_company" label="选择物流">
              <el-select v-model="form.express_company" filterable placeholder="请选择物流">
                <el-option v-for="item in expressList" :key="item.id" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item prop="Logistics_no" label="物流单号"><el-input placeholder="请输入物流单号" v-model="form.Logistics_no"></el-input></el-form-item>
          </el-form>
          <div class="buttons"><el-button type="primary" size="medium" @click="toExpress" style="margin-right: 10px">确认发货</el-button></div>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisible1" width="900px">
      <div v-if="dialogVisible1">
        <div class="order_content">
          <div class="conetnt_a">
            <div class="content_c bor">
              <div class="order_title"><span class="order_title_text">奖品信息</span></div>
              <div class="line">
                <div class="lb">
                  <div class="label">奖品编号:</div>
                  <div class="txt">{{ lottery.Prize.uniqid }}</div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label">商品名称:</div>
                  <div class="txt">{{ lottery.info }}</div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label"></div>
                  <div class="txt">
                    <vimage style='width:100px;height:100px' :src="lottery.Prize.commodity.master"></vimage>
                  </div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label">奖品数量:</div>
                  <div class="txt">{{ lottery.number }}</div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label">中奖用户:</div>
                  <div class="txt">
                    <el-button size="medium" type="text" @click="showUser">{{ lottery.User.nickname }}</el-button>
                  </div>
                </div>
              </div>

            </div>
            <div class="content_c">
              <div class="order_title"><span class="order_title_text">发货信息</span></div>
              <div class="line">
                <div class="lb">
                  <div class="label">来源:</div>
                  <div class="txt"><i class="weixin el-sc-weixin4"></i></div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label">收货人:</div>
                  <div class="txt">{{ lottery.Logistics.name }}</div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label">联系号码:</div>
                  <div class="txt">{{ lottery.Logistics.mobile }}</div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label">收货地址:</div>
                  <div class="txt">{{ lottery.Logistics.address }}</div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label">配送方式:</div>
                  <div class="txt" v-if="lottery.Logistics.type == 1">快递</div>
                  <div class="txt" v-else-if="lottery.Logistics.type == 2">自提</div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label">配送公司:</div>
                  <div class="txt">{{lottery.Logistics.logistics}}</div>
                </div>
              </div>
              <div class="line">
                <div class="lb">
                  <div class="label">配送单号:</div>
                  <div class="txt">{{lottery.Logistics.express_code}}</div>

                </div>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
    </el-dialog>
  </el-container>
</template>
<script>
import {getLotteryLog, getLotteryLogDetails, getLotteryLogDeliver} from '@/api/mall/prize';
import {getexpress} from '@/api/shop/freight';
export default {
  props: {
    win_style: {
      type: Number,
      require: true
    }
  },
  data() {
    return {
      obj: {
        type: 0,
        receive:0
      },
      objTemp: {},
      page: 1,
      size: 10,
      total: 0,
      tableData: [],

      receivelist:[
        {
          value: 0,
          label: '全部'
        },
        {
          value: 2,
          label: '未领取'
        },
        {
          value: 1,
          label: '已领取'
        },
      ],
      options: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '谢谢惠顾'
        },
        {
          value: 2,
          label: '积分'
        },
        {
          value: 3,
          label: '红包'
        },
        {
          value: 4,
          label: '商品'
        },
        {
          value: 5,
          label: '优惠卷'
        }
      ],
      dialogVisible: false,
      dialogVisible1:false,
      lottery: [],
      form: [],
      expressList: []
    };
  },
  filters: {
    getstatus(data) {
      if (data) {
        switch (data.status) {
          case 0:
            return '未付款';
            break;
          case 1:
            if (data.type == 1) {
              return '待发货';
            } else {
              return '待核销';
            }
            break;
          case 2:
            if (data.type == 1) {
              return '待收货';
            } else {
              return '待核销';
            }
            break;
          case 3:
            if (data.type == 1) {
              return '已收货';
            } else {
              return '已核销';
            }
            break;
          case 4:
            return '已关闭';
            break;
        }
      } else {
        return '';
      }
    }
  },
  created() {
    this.search();
  },
  methods: {
    // 搜索
    search() {
      this.objTemp = Object.assign({}, this.obj);
      this.page = 1;
      this.getList();
    },
    // 获取抽奖活动列表
    getList() {
      let data = {
        ...this.objTemp,
        style: this.win_style,
        page: this.page,
        size: this.size
      };
      if (data.type == 0) {
        delete data.type;
      }
      getLotteryLog(data).then(res => {
        this.tableData = res.msg.data;
        this.total = res.msg.total;
      });
    },
    ChangeCurrent(page) {
      this.page = page;
      this.getList();
    },
    details(id,type) {
      let data = {id};
      getLotteryLogDetails(data).then(res => {
       let lottery = res.msg;

    lottery.Prize.commodity=JSON.parse(lottery.Prize.commodity)
  this.lottery=lottery
        this.lottery_id = id;

        if(type==1){
            this.getExpressAll();
              this.dialogVisible = true;
        }else{
            this.dialogVisible1 = true;
        }

      });
    },
    //查看用户详情
    showUser() {
      console.log('显示用户详情');
    },
    //获取所有快递
    getExpressAll() {
      this.isLoading = true;
      getexpress().then(res => {
        this.isLoading = false;
        this.expressList = res.msg;
      });
    },
    toExpress() {
      let data = {
        id: this.lottery_id,
        express_code: this.form.express_company,
        logistics: this.form.Logistics_no
      };
      getLotteryLogDeliver(data).then(res => {
        this.dialogVisible = false;
        this.getList()
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.filter_head {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lottery_div {
  div {
    padding: 10px;
    display: block;
    color: #333;
    font-weight: bold;
    font-size: 14px;
    span {
      color: #666;
      font-weight: normal;
    }
  }
}
.user {
  display: flex;
  align-items: center;
  .info {
    display: flex;
    flex-direction: column;
    margin-left: 10px;

    .name {
      display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
      overflow: hidden; /*超出的文本隐藏*/
      text-overflow: 'ellipsis'; /* 溢出用省略号*/
      -webkit-box-orient: vertical; /*伸缩盒子的子元素排列：从上到下*/
      margin-bottom: 5px;
    }

    .source {
      .weixin {
        font-size: 18px;
        color: #333;
      }
    }
  }
}
.win {
  color: #ff1f2c;
}
.load {
  color: #19be6b;
}
.order_title_text {
  display: flex;
  flex: 1;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}
.order_content {
  margin-top: 20px;
  background: #fff;
  padding: 20px 0;
  color: #606266;
  font-size: 14px;
  padding: 20px;
  .conetnt_a {
    display: flex;
    .content_c {
      flex: 1;
      padding-left: 20px;
    }
  }
  // display: flex;

  .buttons {
    text-align: right;
    padding-bottom: 20px;
    .el-button {
      // background: #4d6ef2;
      &:hover {
        background: #3455da;
        color: #fff;
      }
    }
  }
  .line {
    display: flex;
    // height: 36px;
    line-height: 36px;
    font-size: 14px;
    .lb {
      display: flex;
      flex-grow: 1;

      .label {
        width: 80px;
        text-align: right;
        flex-shrink: 0;
        margin-right: 5px;
      }

      .txt {
        // display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
        // -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
        // overflow: hidden; /*超出的文本隐藏*/
        // text-overflow: 'ellipsis'; /* 溢出用省略号*/
        // -webkit-box-orient: vertical; /*伸缩盒子的子元素排列：从上到下*/

        .weixin {
          font-size: 18px;
          color: #333333;
        }
      }
    }

    .status {
      display: flex;
      width: 300px;

      .label {
        width: 80px;
        text-align: right;

        &::after {
          content: ('：');
        }
      }

      .txt {
        font-size: 14px;
        font-weight: 700;
      }
    }
  }
}
.bor {
  border-right: 1px solid #dcdfe6;
}
</style>
